<template>
  <div>
    <el-card shadow="hover">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="受理时效" name="first">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form label-width="120px" class="formBox">
                <el-form-item label="受理时效">
                  <el-input v-model="acceptance.timePrescription" type="number" :min="0"
                    ><span slot="append">分</span></el-input
                  >
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="lifespanSubmit(1)">修改</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>时效说明</span>
                </div>
                <div>
                  <div class="shuoRow">
                    <el-button type="success" circle></el-button>
                    <span class="shuotext">距离规定时效还宽裕</span>
                  </div>
                  <div class="shuoRow">
                    <el-button type="warning" circle></el-button>
                    <span class="shuotext">距离规定时效还剩5分钟</span>
                  </div>
                  <div class="shuoRow">
                    <el-button type="danger" circle></el-button>
                    <span class="shuotext">超时</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="核实时效" name="second">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form label-width="120px" class="formBox">
                <el-form-item label="核实时效">
                  <el-input v-model="verify.timePrescription" type="number" :min="0"
                    ><span slot="append">分</span></el-input
                  >
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="lifespanSubmit(3)">修改</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="8">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span>时效说明</span>
                </div>
                <div>
                  <div class="shuoRow">
                    <el-button type="success" circle></el-button>
                    <span class="shuotext">距离规定时效还宽裕</span>
                  </div>
                  <div class="shuoRow">
                    <el-button type="warning" circle></el-button>
                    <span class="shuotext">距离规定时效还剩10分钟</span>
                  </div>
                  <div class="shuoRow">
                    <el-button type="danger" circle></el-button>
                    <span class="shuotext">超时</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="处置时效" name="third">
          <el-tree :data="problemData" class="treeBody" node-key="id" default-expand-all :expand-on-click-node="false">
            <div class="custom-tree-node" slot-scope="{ node, data }">
              <div v-if="data.level === 1">{{ data.label }} （处置时效：{{ data.timePrescription }} ）</div>
              <div v-else>{{ data.label }}</div>
              <div>
                <el-button
                  v-if="data.level === 1"
                  icon="el-icon-edit"
                  type="success"
                  size="mini"
                  @click="() => edit(node, data)"
                ></el-button>
              </div>
            </div>
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 编辑时效 -->
    <el-dialog title="编辑时效" :visible.sync="editWin" width="30%" center @close="problemClose">
      <div>
        <el-form label-width="140px">
          <el-form-item label="时长单位：">
            <el-select v-model="editForm.duration" placeholder="请选择时长单位">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数值：">
            <el-input v-model="editForm.number" type="number" :min="0"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button @click="editWin = false">取 消</el-button>
        <el-button type="primary" @click="editSub()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/project'
export default {
  data() {
    return {
      activeName: 'first',
      acceptance: {
        id: 1,
        timePrescription: 0,
      },
      verify: {
        id: 3,
        timePrescription: 0,
      },
      // 时效
      problemData: [],
      editWin: false,
      editForm: {
        id: 0,
        duration: 0,
        number: 0,
      },
      options: [
        {
          value: 0,
          label: '月',
        },
        {
          value: 1,
          label: '日',
        },
        {
          value: 2,
          label: '时',
        },
        {
          value: 3,
          label: '分',
        },
      ],
    }
  },
  created() {
    this.handleClick({ name: 'first' })
  },
  methods: {
    // 切换标签
    handleClick(e) {
      if (e.name == 'first') {
        api.getAcceptance().then(res => {
          if (res.code == '200') {
            this.acceptance.timePrescription = res.data.timePrescription
          }
        })
      } else if (e.name == 'second') {
        api.getVerify().then(res => {
          if (res.code == '200') {
            this.verify.timePrescription = res.data.timePrescription
          }
        })
      } else if (e.name == 'third') {
        this.getMattertype()
      }
    },
    // 修改时效
    lifespanSubmit(id) {
      if (id == 1 && !this.acceptance.timePrescription) {
        this.$message.error('请输入时效')
        return
      }
      if (id == 3 && !this.verify.timePrescription) {
        this.$message.error('请输入时效')
        return
      }
      let data = {
        id,
        timePrescription: 0,
      }
      if (this.activeName == 'first') {
        data.timePrescription = this.acceptance.timePrescription
      } else if (this.activeName == 'second') {
        data.timePrescription = this.verify.timePrescription
      }
      api.updateAgeing(data).then(res => {
        if (res.code == '200') {
          this.$message.success('修改成功')
        }
      })
    },
    // 查询所有事项问题分类
    getMattertype() {
      api.selectmattertype().then(res => {
        if (res.code == '200') {
          this.problemData = []
          let list = res.data
          for (let i = 0; i < list.length; i++) {
            const item = list[i]
            let obj = {}
            obj.id = item.id
            obj.label = item.typeName
            obj.number = item.number
            obj.level = 0
            obj.children = []
            for (let j = 0; j < item.subTypeDTOS.length; j++) {
              const jtem = item.subTypeDTOS[j]
              let jobj = {}
              jobj.id = jtem.id
              jobj.label = jtem.subTypeName
              jobj.number = jtem.number
              jobj.level = 1
              jobj.timePrescription = jtem.timePrescription
              obj.children.push(jobj)
            }
            this.problemData.push(obj)
          }
        }
      })
    },
    // 打开编辑弹窗
    edit(node, data) {
      this.editWin = true
      this.editForm.id = data.id
      let obj = this.options.find(item => {
        return item.label == data.timePrescription.slice(-1)
      })
      this.editForm.duration = Number(obj.value)
      this.editForm.number = data.timePrescription.slice(0, -1)
    },
    // 确认编辑
    editSub() {
      if (!this.editForm.number) {
        this.$message.error('请输入数值')
        return
      }
      let data = {
        subTypeId: this.editForm.id,
        timePrescription: this.editForm.number + this.options[this.editForm.duration].label,
      }
      api.updateTime(data).then(res => {
        if (res.code == '200') {
          this.getMattertype()
          this.$message.success('修改成功')
          this.editWin = false
          this.problemClose()
        }
      })
    },
    // 关闭编辑
    problemClose() {
      this.editForm = {
        id: 0,
        duration: 0,
        number: 0,
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.shuoRow {
  margin-bottom: 10px;
  .shuotext {
    vertical-align: sub;
    margin-left: 15px;
  }
}
.formBox {
  width: 400px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.treeBody {
  width: 600px;
  ::v-deep .el-tree-node__content {
    height: 40px;
  }
}
</style>
